<!doctype html>
<html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>组件-具名slot</title>
</head>
<body>
    <template id="child-template-2">
        <slot name="one">hello vue.js</slot>
        <slot>hello angularjs.js</slot>
        <slot name="two">hello react.js</slot>
    </template>
    <div id="example-2">
        <!--在child模板内写入DOM元素则显示hello vue.js-->
        <!--child模板内没有分发内容，就会显示slot里的内容-->
        <child>
            <p slot="one">hello vue.js</p>
            <p slot="two">hello react.js</p>
            <p>hello javasccript</p>
        </child>
    </div>

<script src="../lib/vue.js"></script>
<script>
    Vue.component('child', {
        template : '#child-template-2'
    })

    var exampleVm = new Vue({
        el : '#example-2',
        data : {

        }
    })
</script>
</body>
</html>